<template>
  <view class="popup">
    <!-- 弹窗没有取消和确定按钮的 ，单选-->
    <u-popup :show="data.show" :round="30" mode="bottom" @close="handleClose">
      <view class="bootom-box">
        <view class="header">
          {{ data.name }}
        </view>
        <view class="nr-box 1" v-if="data.name == '入住类型'">
          <u-radio-group
            v-model="data.value"
            placement="column"
            @change="groupChange"
            iconPlacement="right"
            :borderBottom="true"
          >
            <u-radio
              labelSize="30"
              iconSize="30"
              size="30"
              v-for="(item, index) in data.columns"
              :key="index"
              :label="item.name"
              :name="item.id"
            ></u-radio>
          </u-radio-group>
        </view>
        <view class="nr-box 2" v-else-if="data.name == '预订房型'">
          <u-radio-group
            v-model="data.value"
            placement="column"
            @change="groupChange"
            iconPlacement="right"
            :borderBottom="true"
          >
            <!-- RoomClassId -->
            <u-radio
              labelSize="30"
              iconSize="30"
              size="30"
              v-for="(item, index) in data.columns"
              :key="index"
              :label="item.Name"
              :name="item.Id"
              :disabled="data.selected.some((s) => s.RoomClassId === item.Id)"
            ></u-radio>
          </u-radio-group>
        </view>
        <view class="nr-box 3" v-else>
          <u-radio-group
            v-model="data.value"
            placement="column"
            @change="groupChange"
            iconPlacement="right"
            :borderBottom="true"
          >
            <u-radio
              labelSize="30"
              iconSize="30"
              size="30"
              v-for="(item, index) in data.columns"
              :key="index"
              :label="item.Id"
              :name="item.Id"
            ></u-radio>
          </u-radio-group>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import { toRefs, defineProps } from 'vue'
import { onShow } from '@dcloudio/uni-app'
const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  dataclick: {
    type: Function,
    default: () => null
  }
})
let { data } = toRefs(props)
const groupChange = (n) => {
  data.value.value = n
  props.dataclick(data.value)
}
const handleClose = () => {
  data.value.show = false
  props.dataclick(data.value)
}
onShow(() => {
  console.log(data)
})
</script>

<style lang="scss" scoped>
.popup {
  padding-bottom: 100rpx;
}

.bootom-box {
  .header {
    font-size: 40rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
  }

  .nr-box {
    padding: 0 60rpx;
    max-height: 600rpx;
    overflow-y: auto;
  }
}
</style>
